import {
  Button,
  Card,
  CardBody,
  Heading,
  Image,
  Stack,
  Text,
} from '@chakra-ui/react';
import { Link as RouterLink } from 'react-router-dom';
import type { CatalogItem } from '../../lib/api';

interface Props {
  product: CatalogItem;
  showViewButton?: boolean;
}

const ProductCard = ({ product, showViewButton = true }: Props) => {
  const priceLabel =
    typeof product.price === 'number' ? `$${product.price.toLocaleString()}` : '—';
  const description = product.description ?? 'Latest release from our catalog.';
  const imageSrc =
    product.pictureUrl ??
    'https://images.unsplash.com/photo-1510557880182-3d4d3cba35a5?auto=format&fit=crop&w=460&q=80';

  return (
    <Card variant="outline" borderRadius="2xl" borderColor="gray.200">
      <CardBody>
        <Stack spacing={3} align="center" textAlign="center">
          <Image
            src={imageSrc}
            alt={product.name}
            borderRadius="xl"
            width="140px"
            height="140px"
            objectFit="cover"
            boxShadow="md"
          />
          <Heading as="h4" size="md">
            {product.name}
          </Heading>
          <Text fontSize="sm" color="gray.500">
            {description}
          </Text>
        <Text fontWeight="600" color="brand.600">
          {priceLabel}
        </Text>
        {showViewButton && (
          <Button
            as={RouterLink}
            to={`/product/${product.id}`}
            size="sm"
            colorScheme="brand"
            variant="outline"
          >
            View
          </Button>
        )}
      </Stack>
    </CardBody>
  </Card>
  );
};

export default ProductCard;
